<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<div class="import-devfile-by-url">
  <form name="devfileUrlForm">
    <che-input-box che-form="devfileUrlForm"
                   che-name="devfileURL"
                   che-place-holder="Url of the devfile"
                   aria-label="Url of the devfile"
                   che-width="auto"
                   ng-model="devfileByUrlController.workspaceDevfileLocation"
                   che-on-change="devfileByUrlController.onUrlChanged($value)"
                   ng-model-options="{ debounce: { 'default': 1000, 'blur': 0 }, allowInvalid: false}"
                   custom-async-validator="devfileByUrlController.isUrlValid($value)"
                   ng-maxlength="512"
                   ng-required="true"
                   type="url">
      <div ng-message="required"></div>
      <div ng-message="maxlength">
        The URL has to be less than 512 characters long
      </div>
      <div ng-message="customAsyncValidator">
        Unknown Content Type or no Content Type found in URL
      </div>
      <div ng-show="devfileUrlForm.$invalid">
        Invalid URL
      </div>
    </che-input-box>
  </form>
  <div class="devfile-show-content" ng-if="devfileUrlForm.$valid && devfileByUrlController.workspaceDevfile">
    <che-show-area show-title="Show content" hide-title="Hide content">
      <workspace-devfile-editor is-active="false"
                                editor-read-only="true"
                                workspace-devfile="devfileByUrlController.workspaceDevfile"></workspace-devfile-editor>
    </che-show-area>
    <span class="additional-info">The content is read-only</span>
  </div>
</div>
